<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="icon" th:href="@{/static/images/logo.ico}">
  <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/layui/css/layui.css}" media="all">
  <style>
    .layui-panel{
      height: 100%;
    }
    .my-panel{
      margin-top: 50px;
    }
    .my-panel li {
      text-align: center;
      height: 50px;
      line-height: 50px;
      background-color: #28333E;
      color: rgb(191, 187, 187);
    }
    .my-panel li.active {
      color: #FFFFFF;
      background-color: #1e9fff;
    }
    .my-panel li:hover {
      cursor: pointer;
      color: #FFFFFF;
      background-color: #cccccc;
    }
    .my-badge{
      padding: 3px;
      width: 100px;
      height: 20px;
    }
    .room-container{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .room-container .room-parent{
      height: 200px;
      flex-basis: 150px;
      margin: 10px;
      box-shadow: 2px 2px 2px 2px #ccc;
    }
    .room-container .room{
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="layui-row">
  <div class="layui-col-xs2">
    <div class="layui-panel my-panel">
      <div style="padding: 32px;">
        <ul>
          <li th:each="item : ${floorList}" th:class="${item.value == '1'? 'active':''}" th:attr="data-id=${item.value}" th:text="${item.name}"></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="layui-col-xs10">
    <div class="layui-panel">
      <div class="layui-row">
        <div class="layui-col-xs8 layui-col-xs-offset4">
          <span th:each="item : ${roomStatusList}" th:classappend="${'layui-bg-' + item.description}" class="layui-badge my-badge"  th:text="${item.name}"></span>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-xs12 room-container">
          <div class="room-parent" th:each="item : ${roomList}" >
            <div th:each="statusItem : ${roomStatusList}" th:if="${item.roomState} == ${statusItem.value}" th:text="${item.roomNum}" class="room" th:classappend="'layui-bg-' + ${statusItem.remarks}">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script th:src="@{/static/lib/juqery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">
  let ctx = [[${#httpServletRequest.getContextPath()}]];
  let roomStatusList = [[${roomStatusList}]];
</script>
<script>
  window.onload = function (){
    $(".my-panel li").click(function(e){
      console.log(this.dataset.id);
      $(".active").removeClass("active");
      this.classList.add("active");
      // 发送请求，请求房间信息
      $.ajax({
        url: ctx + '/checkin/roomList',
        type: 'get',
        data: {
          floor: this.dataset.id
        },
        success: function (data){
          console.log(data);
          console.log(roomStatusList)
          // 添加元素
          let roomContainer = document.querySelector(".room-container");
          let html = '';
          for(let item of data.data){
            for(let status of roomStatusList){
              if (item.roomState == status.value){
                html += `
                                    <div class="room-parent">
                                        <div  class="room layui-bg-${status.remarks}">
                                            ${item.roomNum}
                                        </div>
                                    </div>`;
              }
            }
          }
          roomContainer.innerHTML = html;

        }
      })
    });
    // var listOfLi = document.querySelectorAll(".my-panel li");
    //
    // console.log(listOfLi)
    //
    //
    // for (let item of listOfLi){
    //     item.onclick = function (){
    //         console.log(this)
    //     }
    // }
  }
</script>
</body>
</html>